<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-container class="container_box">
        <el-aside
            width="250px"
            class="physical_aside"
            style="background-color: #fff"
        >
          <!-- 左侧列表 -->
          科室目录
          <departments
              :expandOnClickNode = "false"
              :defaultExpandAll="true"
              :list="departmentList"
              @getcatatlogue="getcatatlogue"
          ></departments>
        </el-aside>
        <el-main>
          <div class="header_top">
            <div>
              <el-form
                  :inline="true"
                  :model="formInline"
                  class="demo-form-inline"
              >
                <el-form-item label="项目名称">
                  <el-input
                      v-model="formInline.itemName"
                      placeholder="项目名称"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="onSubmit">查 找</el-button>
                </el-form-item>
                <el-form-item class="staff_form_btn">
                  <el-button type="primary" @click="addItemList()"
                  >添加
                  </el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-divider></el-divider>
          </div>
          <!-- 上级科目 -->
          <div class="toplist">
            <div class="">
              科室名称-> <span>{{ name }} ({{ total }}) </span>
            </div>
            <br/>
            <el-table
                :data="tableData"
                highlight-current-row
                height="300"
                @current-change="getindex"
                border
            >
              <el-table-column prop="itemCode" label="编号" width="80">
              </el-table-column>
              <el-table-column prop="itemName" label="项目名称" width="220">
              </el-table-column>
              <el-table-column prop="searchChar" label="项目代码" width="80">
              </el-table-column>
              <el-table-column prop="itemKind" label="项目类型" width="120">
                <template slot-scope="scope">
                  <span>{{ formatType(scope.row.itemKind) }}</span>
                </template>

              </el-table-column>
              <el-table-column prop="sequence" label="排序" width="80">
              </el-table-column>
              <el-table-column prop="printnum" label="条码张数" width="80">
              </el-table-column>
              <el-table-column prop="itemGroupName" label="项目分组" width="120">
              </el-table-column>
              <el-table-column prop="applyTo" label="适用范围" width="120">
                <template slot-scope="scope">
                  <span>{{ scope.row.applyTo|applyToRange }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="descr" label="项目描述" width="220">
              </el-table-column>
              <el-table-column prop="price" label="定价" width="80">
              </el-table-column>
              <el-table-column label="是否启用">
                <template slot-scope="scope">
                  <el-checkbox
                      v-model="scope.row.status"
                      :true-label="1"
                      :false-label="0"
                      disabled
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="编辑时间" width="220">
                <template slot-scope="scope">
                  <span>{{ scope.row.editTime | formatDate }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="editor" label="编写者" width="80">
              </el-table-column>
              <el-table-column
                  width="160"
                  fixed="right"
                  prop="address"
                  label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                      @click="handleClick(scope.row)"
                      type="primary"
                      size="small"
                  >编辑
                  </el-button>
                  <el-button
                      @click="remove(scope.row)"
                      type="danger"
                      size="small"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
              socket
            </el-table>
            <div class="block">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="tableData.pageNo"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="tableData.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
              >
              </el-pagination>
            </div>
          </div>
          <!-- 右下角列表 -->
          <div class="box_list_box" v-show="showItemName">
            <br/>
            <div class="h1">{{ form.itemName }}</div>
            <br/>
            <el-table :data="form.lstExamItemContents" height="280">
              <el-table-column prop="sequence" label="序号" width="80">
              </el-table-column>
              <el-table-column prop="contentCode" label="编码">
              </el-table-column>
              <el-table-column prop="contentName" label="检查内容名称">
              </el-table-column>
              <el-table-column prop="units" label="计量单位"></el-table-column>
              <el-table-column label="正常值参考范围">
                <template slot-scope="scope">
                  <span
                  >{{ scope.row.minValue }} -- {{ scope.row.maxValue }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="maxValue" label="危值范围">
                <template slot-scope="scope">
                  <span
                  >{{ scope.row.minLimit }} -- {{ scope.row.maxLimit }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="sequence" label="排序"></el-table-column>
              <el-table-column label="启用状态">
                <template slot-scope="scope">
                  <el-checkbox
                      v-model="scope.row.status"
                      :true-label="1"
                      :false-label="0"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column :width="180" label="操作">
                <template slot-scope="scope">
                  <el-button
                      @click="editItemId(2, scope.row, scope.$index, 1)"
                      type="primary"
                      size="small"
                  >编辑
                  </el-button
                  >
                  <el-button
                      @click="removeItemId(scope.row, scope.$index, 1)"
                      type="danger"
                      size="small"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>
    <!-- 模态框 -->
    <!-- 体检套餐添加编辑 -->
    <!-- <addPages :dialogFormVisible="dialogFormVisible" :addform="form" :set="set" @getcat="getcat"></addPages> -->
    <el-dialog
        title="编辑体检项目信息"
        :visible.sync="dialogFormVisibledm"
        :append-to-body="true"
        width="90%"
        class="top_dialog"
    >
      <el-form :model="form" label-position="left">
        <div class="add_info">
          <div class="info_l">
            <div class="info_l_head">
              <div style="height:36px"></div>
              <el-divider></el-divider>
            </div>
            <div>
              <div class="dialog_flex">
                <div>
                  <el-form-item label="项目名称" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.itemName"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="代码" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.searchChar"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="打印张数" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.printnum"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="项目类型" :label-width="formLabelWidth">
                    <el-select
                        v-model="form.itemKind"
                        placeholder="请选择项目类型"
                        @change="selectExamItemsGroupList"
                    >
                      <el-option v-for="(v,i) in dict.xmType" :key="i" :label="v.itemName"
                                 :value="v.dictItemId"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="空腹要求" :label-width="formLabelWidth">
                    <el-select
                        v-model="form.emptyStomachRequire"
                        placeholder="请选择"
                    >
                      <el-option label="不限" value="-1"></el-option>
                      <el-option label="空腹" value="1"></el-option>
                      <el-option label="餐后" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="结果来源" :label-width="formLabelWidth">
                    <el-select
                        v-model="form.resultSource"
                        placeholder="请选择"
                    >
                      <el-option label="未指定" value="-1"></el-option>
                      <el-option label="送检" value="1"></el-option>
                      <el-option label="自检" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="dialog_flex_r">
                  <el-form-item label="编码" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.itemCode"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="显示顺序" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.sequence"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="适用范围" :label-width="formLabelWidth">
                    <el-select
                        v-model="form.applyTo"
                        placeholder="请选择适用范围"
                    >
                      <el-option label="不限" :value="-1"></el-option>
                      <el-option label="男性" :value="1"></el-option>
                      <el-option label="女性" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="条码分组" :label-width="formLabelWidth">
                    <el-select
                        v-model="form.barcodegroupId"
                        placeholder="请选择分组"
                    >
                      <el-option v-for="(v,i) in select.list" :key="i" :label="v.groupName" :value="v.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="定价" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.price"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="预约限量" :label-width="formLabelWidth">
                    <el-input
                      v-model="form.everydayLimitqty"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item> -->
                </div>
              </div>
              <el-form-item label="项目说明" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.descr"></el-input>
              </el-form-item>
              <el-form-item label="" :label-width="formLabelWidth">
                <el-checkbox-group v-model="form.status">
                  <el-checkbox :true-label="1" :false-label="0"
                  >是否启用
                  </el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="编辑时间" :label-width="formLabelWidth">
                <el-form-item prop="date1">
                  <el-date-picker
                      type="datetime"
                      placeholder="选择日期"
                      v-model="form.editTime"
                  ></el-date-picker>
                </el-form-item>
              </el-form-item>
              <!-- <el-button type="primary" style="position: absolute;right:0;padding-left:50px;padding-right:50px" @click="consoleone()">保存</el-button> -->
            </div>
          </div>
          <!-- 项目内容列表 -->
          <div class="info_r">
            <div>
              <span>添加项目内容 ({{ itemlength }})</span>
              <el-button
                  style="margin-left: 20px"
                  size="medium"
                  type="primary"
                  @click="editItemId(1, '', '', 2)"
              >添加
              </el-button
              >
              <el-divider></el-divider>
            </div>
            <div>
              <el-table :data="form.lstExamItemContents" height="500" border>
                <el-table-column prop="sequence" label="编号" width="80">
                </el-table-column>
                <el-table-column
                    prop="contentName"
                    label="检查内容名称"
                    width="220"
                >
                </el-table-column>
                <el-table-column prop="units" label="计量单位" width="120">
                </el-table-column>
                <el-table-column label="正常值参考范围">
                  <template slot-scope="scope">
                    <span
                    >{{ scope.row.minLimit }}--{{ scope.row.maxLimit }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column :width="180" label="操作">
                  <template slot-scope="scope">
                    <el-button
                        @click="editItemId(2, scope.row, scope.$index, 2)"
                        type="primary"
                        size="small"
                    >编辑
                    </el-button
                    >
                    <el-button
                        @click="removeItemId(scope.row, scope.$index, 2)"
                        type="danger"
                        size="small"
                    >删除
                    </el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="console()">保 存</el-button>
        <el-button @click="dialogFormVisibledm = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑体检项目信息详情页 -->
    <el-dialog
        title="编辑项目内容信息"
        :visible.sync="dialogFormcontent"
        :append-to-body="true"
        width="1000px"
        class="top_dialog"
        :show-close="false"
    >
      <el-form :model="itemform" label-position="left">
        <div class="add_info">
          <div class="info_l">
            <div class="info_l_head">
              <p style="font-size: 20px">
                项目名称： {{ form.itemName }}
              </p>
              <el-divider></el-divider>
            </div>
            <div>
              <el-form-item label="内容名称" :label-width="formLabelWidth">
                <el-input
                    v-model="itemform.contentName"
                    autocomplete="off"
                ></el-input>
              </el-form-item>
              <div class="dialog_flex">
                <div>
                  <el-form-item label="计量单位" :label-width="formLabelWidth">
                    <el-input
                        v-model="itemform.units"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="margin_left">
                  <el-form-item label="编码" label-width="40px">
                    <el-input
                        v-model="itemform.contentCode"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="margin_left">
                  <el-form-item label="显示序号" label-width="80px">
                    <el-input
                        v-model="itemform.sequence"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="dialog_flex">
                <div>
                  <el-form-item
                      label="正常参考值"
                      :label-width="formLabelWidth"
                  >
                    <el-input
                        v-model="itemform.minValue"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="margin_left">
                  <el-form-item label="——" label-width="40px">
                    <el-input
                        v-model="itemform.maxValue"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="dialog_flex">
                <div>
                  <el-form-item :label-width="formLabelWidth" label="危值范围">
                    <el-input
                        v-model="itemform.minLimit"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="margin_left">
                  <el-form-item label="——" label-width="40px">
                    <el-input
                        v-model="itemform.maxLimit"
                        autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="dialog_flex">
                <div class="margin_left">
                  <el-form-item label="结果默认值" :label-width="formLabelWidth">
                    <el-input v-model="itemform.defaultValue" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="margin_left">
                  <el-form-item label="趋势显示" :label-width="formLabelWidth">
                    <el-input v-model="itemform.trendDisplaychar" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="dialog_flex">
                <el-form-item label="正常趋势值" :label-width="formLabelWidth">
                  <el-input v-model="itemform.normalDisplaychar" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <!-- <el-form-item label="是否启用">
                <el-checkbox-group v-model="itemform.status">
                  <el-checkbox
                    class="info_sel_r_group"
                    :true-label="1"
                    :false-label="0"
                  ></el-checkbox>
                </el-checkbox-group>
              </el-form-item> -->
              <!-- <div>
                <el-button type="primary">保存并继续</el-button>
              </div> -->
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveItem()">保 存</el-button>
        <el-button @click="dialogFormcontent = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// import Vue from "vue";
import crumbs from "../../views/Crumbs.vue";
import departments from "../common/departments.vue";
// import addPages from "../common/basic/addPages.vue";
import projectlist from "../common/basic/projectlist.vue";
import {formatTimeToStr} from "../../common/utils/date.js";

export default {
  components: {
    crumbs,
    departments,
    // addPages,
    projectlist,
  },
  data() {
    return {
      select: {},
      dict: {},
      pageSize: 10,
      pageNo: 1,
      total: 0,
      name: "全部",
      navId:0,
      departmentList: [],
      form: {
        status: "",
      },
      itemform: {
        status: "",
      },
      lstExamItem: [],
      formLabelWidth: "100px",
      // 模态框
      // dialogFormVisible: false,
      dialogFormVisibledm: false,
      dialogFormcontent: false,

      tableData: [],
      formInline: {},
      // lstExamItemContents: [],
      id: "",
      chanadd: 2,
      BreadCrumb: [
        {
          path: "",
          name: "基础管理",
        },
        {
          path: "",
          name: "项目设置",
        },
      ],
      // 状态判断 修改和新增 1是新增 2是更改
      datas: 0,
      index: 0,
      // 状态判断 直接提交和暂存 1是直接提交 2是暂存
      add: 0,
      // 详情列表展示
      showItemName: false,
      itemlength: 0
    };
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time !== "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
    applyToRange: function (range) {
      if (range == -1) {
        return "不限"
      }
      if (range == 1) {
        return "男性"
      }
      if (range == 2) {
        return "女性"
      }
    }
  },
  created() {
    this.searchDictList();

    // 部门列表获取
    this.getDepartmentList();
    // 列表刷新
    this.getexamItemList();
    this.selectExamItemsGroupList()
  },
  mounted() {
  },
  methods: {
    selectExamItemsGroupList() {
      this.$axios.selectExamItemsGroupList({
        "itemType": this.form.itemKind
      }).then((res) => {
        if (res.code === "00000") {
          this.$set(this.select, "list", res.data)
          //  this.select.list = res.data
        }
      });
    },

    searchDictList() {
      this.$axios.searchDictList({
        codes: ["xmType"],
      }).then((res) => {
        if (res.code === "00000") {
          res.data.forEach(v => {
            this.dict[v.dictCode] = v.items
          })
          this.dict.xmType.forEach((item, index) => {
            this.dict.xmType[index].dictItemId = String(this.dict.xmType[index].dictItemId)
          })
        }
      });
    },
    formatType(val) {
      const map = {}
      this.dict.xmType.forEach(v => {
        map[v.dictItemId] = v.itemName
      })
      if (map[val] !== undefined) {
        return map[val]
      }
      return val
    },

    // 部门数结构请求
    getDepartmentList() {
      let that = this;
      this.$axios.getDepartTreeList({}).then((res) => {
        if (res.code == "00000") {
          that.navId = res.data[0].id
          that.departmentList = res.data;
        }
      });
    },
    // 根据id获取体检项目
    getcatatlogue(e) {
      // 存储科室id
      this.navId = e.id;
      this.name = e.label;
      this.$axios
          .examItemList({
            deptId: e.id,
          })
          .then((res) => {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.total
          });
    },
    // 查找
    onSubmit() {
      this.$axios
          .examItemList({
            deptId: this.navId,
            itemName: this.formInline.itemName,
          })
          .then((res) => {
            console.log(res, "名称获取");
            this.tableData = res.data.records;
            this.tableData = res.data.records;
            this.total = res.data.total;
          });
    },
    // 科室名称 列表刷新
    getexamItemList() {
      // this.dialogFormVisibledm = false;
      this.$axios
          .examItemList({
            deptId: this.navId,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
          })
          .then((res) => {
            if (res.code == "00000") {
              this.tableData = res.data.records;
              this.total = res.data.total;
            }
            // this.lstExamItemContents = this.form.lstExamItemContents;
          });
    },

    // 删除体检项目
    remove(e) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
            .deleteExamItem({
              examItemId: e.id,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getexamItemList();
              }
            });
      });
      console.log(e);
    },
    // 添加页面展开
    addItemList() {
      this.dialogFormVisibledm = true;
      this.form = {
        status: "",
        deptId: this.navId,
        lstExamItemContents: [],
        editTime: new Date()
      };
      // if(this.form.lstExamItemContents==null){
      this.itemlength = 0
      // }else{
      //   this.itemlength = this.form.lstExamItemContents.length
      // }

    },
    // 更改页面展开
    handleClick(e) {
      console.log(e);
      this.dialogFormVisibledm = true;
      this.$axios
          .getExamItemById({
            examItemId: e.id,
          })
          .then((res) => {
            if (res.code == "00000") {
              this.form = res.data;
              // this.itemlength = res.data.lstExamItemContents.length
              if (this.form.lstExamItemContents.length == 0) {
                this.itemlength = 0
              } else {
                this.itemlength = this.form.lstExamItemContents.length
              }
              this.selectExamItemsGroupList()
            }
          });

    },
    // handleClicks() {},
    // removes() {},
    // 添加和更改
    addchan() {
      if (this.navId) {
        if (this.form.id) {
          this.$axios
              .updateExamItem({
                ...this.form,
                deptId:this.navId
              })
              .then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.dialogFormVisibledm = false;
                }

                this.getexamItemList();
              });
        } else {
          this.$axios
              .insertExamItem({
                ...this.form,
                deptId:this.navId
              })
              .then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.dialogFormVisibledm = false;
                }

                // console.log(res, "更新id获取");
                this.getexamItemList();
              });
        }
      } else {
        this.$message({
          type: "success",
          message: "请选择对应科室，重新添加",
        });
      }
    },
    // 临时保存
    // consoleone() {
    // this.dialogFormVisibledm = false;
    // this.form.lstExamItemContents = this.lstExamItemContents;
    //   this.addchan();
    // },
    console() {
      // this.dialogFormVisibledm = false;
      // this.form.lstExamItemContents = this.lstExamItemContents;
      this.addchan();
    },
    // 每页几条
    handleSizeChange(val) {
      // console.log(val);
      this.pageSize = val;
      this.getexamItemList();
    },
    // 第几页
    handleCurrentChange(val) {
      // console.log(val);
      this.pageNo = val;
      this.getexamItemList();
    },
    editItemId(datas, res, index, add) {
      // datas 1是添加 2是编辑
      // add 1是请求接口 2是暂时存储
      this.datas = datas;
      this.add = add;
      if (datas == 1) {
        this.itemform = {
          status: 0,
        };
      } else {
        this.itemform = res;
        this.index = index;
      }
      this.dialogFormcontent = true;
    },
    // 详情删除
    removeItemId(res, index, add) {
      this.add = add;
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.form.lstExamItemContents.splice(index, 1);
        this.itemlength -= 1
        if (this.add == 1) {
          this.addchan();
        }
      });
    },
    // 保存更新
    saveItem() {
      if (this.datas == 1) {
        this.itemform.itemId = this.form.id;
        this.form.lstExamItemContents.push(this.itemform);
        this.itemlength += 1
      } else {
        this.form.lstExamItemContents.splice(this.index, 1, this.itemform);
        if (this.add == 1) {
          this.addchan();
        }
      }
      this.dialogFormcontent = false;
    },

    // 获取项目id 刷新右下角列表
    getindex(e) {
      // console.log(e, "list");
      if (e.deptId) {
        this.navId = e.deptId;
      }
      this.id = e.id;
      this.$axios
          .getExamItemById({
            examItemId: this.id,
          })
          .then((res) => {
            if (res.code == "00000") {
              this.form = res.data;
              this.showItemName = true;
            }
          });
    },
    //  右下角列表
    // botttmeditItemId(res) {
    //   // this.chanadd = 2;
    //   this.itemform = res;
    // },
    // tableCellClassName({ row, column, rowIndex, columnIndex }) {
    //   //注意这里是解构
    //   //利用单元格的 className 的回调方法，给行列索引赋值
    //   row.index = rowIndex;
    //   column.index = columnIndex;
    // },
  },
};
</script>

<style scoped>
.main_box_title {
  background: #fff;
  padding: 10px;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.header_top .el-divider--horizontal {
  margin-top: 0px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.staff_form_btn {
  margin-left: 20px;
}

/* .physical_aside {
		margin-top: 40px;
	} */

.box_list_box {
  flex: 1;
  margin-top: 20px;
  background-color: #fff;
}

.box_list_box .h1 {
  margin-left: 2%;
}

.el_tab {
  margin-top: 20px;
}

.add_info {
  display: flex;
  padding: 0px 30px;
}

.info_l {
  text-align: left;
  position: relative;

  /* flex: 1; */
}

.info_r {
  width: 60%;
  text-align: left;
  flex: 1;
  margin-left: 30px;
}

.info_sel {
  display: flex;
}

.info_sel_r {
  margin-left: 20px;
}

.top_dialog /deep/ .el-dialog__body {
  padding: 0px !important;
}

.block {
  text-align: center;
  margin-top: 10px;
  /* margin:0px auto; */
}

.dialog_flex {
  display: flex;
}

.dialog_flex_r {
  margin-left: 20px;
}

.info_sel_r_group {
  margin-left: 10px;
}

.top_dialog /deep/ .el-dialog {
  margin-top: 5vh !important;
}

.el-aside {
  height: 85vh;
}

.toplist /deep/ .el-table td {
  padding-top: 2px;
  padding-bottom: 2px;
}

.box_list_box /deep/ .el-table td {
  padding-top: 2px;
  padding-bottom: 2px;
}
</style>
